<template>
  <div v-loading="loading.status" class="body">
    <div class="table_content">
      <div class="table_filtrate">
        <div class="tf_item" style="margin-right: 30px">
          <div class="tag">机构搜索</div>
          <el-input v-model="tableParams.organization_fuzzy_search" class="input_fuzzy_search input" size="mini"
            placeholder="模糊搜索 机构ID|机构名字" clearable />
        </div>

        <div class="tf_item" style="margin-right: 30px">
          <div class="tag">产品搜索</div>
          <el-input v-model="tableParams.product_fuzzy_search" class="input_fuzzy_search input" size="mini"
            placeholder="模糊搜索 产品ID|产品名字|计划名称" clearable />
        </div>

        <div v-if="jsAuthJudgment('manage')" class="tf_item">
          <div class="tag">商务</div>

          <el-select v-model="tableParams.business_uid" class="input" size="mini" placeholder="请选择"
            style="margin-right: 10px">
            <el-option label="全部" :value="0" />
            <el-option v-for="item in tableFiltrateData.business_list" :key="item.id" :label="item.nickname"
              :value="item.id" />
          </el-select>
        </div>

        <div class="tf_item" style="margin-right: 30px">
          <div class="tag">时间</div>
          <el-date-picker v-model="tableParams.time_interval" size="mini" type="daterange" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" value-format="timestamp" />
        </div>

        <div class="tf_item">
          <el-button size="mini" type="primary" plain @click="loadTableData">搜索</el-button>
        </div>
      </div>

      <div class="table_operate">
        <div class="tool-self">
          <el-button class="btn_export" type="info" size="mini" @click="exportExcelFun()">导出<i
              class="el-icon-download el-icon--right" /></el-button>
        </div>
      </div>

      <div class="table-card">
        <el-table id="table_id" v-loading="loading.table" class="table" :data="tableData.data"
          :row-class-name="tableRowClassName" show-summary :summary-method="$_App_getSummaries" :border="true"
          size="mini">
          <!-- <el-table-column prop="id" label="ID" width="60"> </el-table-column> -->

          <el-table-column prop="date" label="日期" width="90" />
          <el-table-column prop="organization_id" label="机构ID" width="60" />
          <el-table-column prop="organization_name" label="机构名字" width="140" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span slot="reference" class="ellipsis custom-link" style="font-size: 12px">{{ scope.row.organization_name
                }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="product_id" label="产品ID" width="60" />
          <el-table-column prop="product_name" label="产品名字" width="140" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              {{ scope.row.product_name }}
            </template>
          </el-table-column>
          <el-table-column prop="product_plan_name" label="计划名称" width="200" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              {{ scope.row.product_plan_name }}
            </template>
          </el-table-column>
          <el-table-column prop="product_loan_type" label="助贷类型">
            <template slot-scope="scope">
              <el-tag size="mini" :type="scope.row.product_loan_type == 'nationwide'
                  ? 'primary'
                  : 'danger'
                " disable-transitions>{{
                  scope.row.product_loan_type == "nationwide" ? "全国" : "区域"
                }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="product_cooperative_price" label="机构价格" />
          <el-table-column prop="product_agency_price" label="代理差价" v-if="isManage"/>
          <el-table-column prop="product_real_price" label="实际价格" v-if="isManage"/>

          <el-table-column prop="product_clue_num" label="成功推送数" width="100" />

          <el-table-column prop="product_clue_price_sham" label="消耗" />

          <el-table-column prop="product_clue_price_real" label="最终匹配消耗" v-if="isManage"/>

          <el-table-column prop="nickname" label="商务" width="150" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              {{ scope.row.nickname }}
            </template>
          </el-table-column>

          <el-table-column prop="good_rate" label="优质率">
            <template slot-scope="scope"> {{ scope.row.good_rate }}% </template>
          </el-table-column>

          <el-table-column prop="call_completing_rate" label="接通率">
            <template slot-scope="scope">
              {{ scope.row.call_completing_rate }}%
            </template>
          </el-table-column>
        </el-table>

        <el-pagination v-if="!loading.table" class="table-pagination-card" :current-page="tableParams.page"
          :page-sizes="$pageSize" :page-size="tableParams.size" layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total" @size-change="handleTableSizeChange" @current-change="handleTableCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script>
import {
  apiDashboardProductStatsListpage,
  apiAgentList
} from '@/api/apiCommon'

import { paramsDeleteNull } from '@/utils/common'
import { dateToTimestamp } from '@/utils/datetimeUtil'
import { appUtil, authJudgment } from '@/utils/appUtil'
import { loading_start, loading_end } from '@/utils/loadingUtil'
import { exportExcel } from '@/utils/htmlToExcelUtils'
export default {
  name: 'Index',
  data() {
    return {
      isManage: false, //authJudgment("manage"), // 是否是管理员
      tableParams: {
        page: 1,
        size: 15,
        organization_fuzzy_search: '',
        product_fuzzy_search: '',
        business_uid: '',
        time_interval: [
          new Date(new Date().setHours(0, 0, 0, 0)), // 今天的初始时间戳
          new Date(new Date().setHours(23, 59, 59, 999)) // 今天的结束时间戳
        ]
      },
      tableFiltrateData: {
        business_list: []
      },
      tableData: {
        current_page: 1,
        data: [],
        last_page: 1,
        per_page: '15',
        total: 0
      },
      currentPage4: 1,
      business_select: [],
      organization_select: [],
      fromViewCofing: {
        input_width: '120px',
        label_width: '120px'
      },
      loading: {
        dialog_create: false,
        table: false
      }
    }
  },
  created() {
    this.isManage = authJudgment("manage"); // 是否是管理员
    this.loadTableData()
    if (this.jsAuthJudgment('manage')) {
      this.req_agent()
    }
  },
  methods: {
    // 导出表格
    exportExcelFun() {
      exportExcel('助贷收益统计')
    },
    // 列表请求
    loadTableData() {
      const _this = this
      _this.loading_start('table')
      var tableParamsData = { ..._this.tableParams }

      var start_date = tableParamsData['time_interval'][0]
      var end_date = tableParamsData['time_interval'][1]
      tableParamsData['start_time'] = dateToTimestamp(start_date)
      tableParamsData['end_time'] = dateToTimestamp(end_date)
      delete tableParamsData['time_interval']
      if (tableParamsData['organization_fuzzy_search'] == '') {
        delete tableParamsData['organization_fuzzy_search']
      }
      if (tableParamsData['product_fuzzy_search'] == '') {
        delete tableParamsData['product_fuzzy_search']
      }

      if (tableParamsData['business_uid'] == '') {
        delete tableParamsData['business_uid']
      }

      apiDashboardProductStatsListpage(tableParamsData)
        .then((response) => {
          const result = response

          var tableData = result.data.datalist
          var data = tableData.data

          // for (var i = 0; i < data.length; i++) {
          //   if (data[i]["product_clue_num"] <= 0) {
          //     // console.log(data[i], "data[i]");
          //     // delete data[i];
          //   }
          // }

          tableData.data = data
          _this.tableData = tableData
          _this.loading_end('table')
        })
        .catch(function (result) {
          _this.tableData.data = null
          _this.loading_end('table')
        })
    },
    // 获取机构列表
    reqApiOrganization(business_uid) {
      const _this = this
      _this.loading_start('table')
      apiOrganizationSelects({
        page: 1,
        size: 99,
        business_uid: business_uid
      }).then((response) => {
        const result = response.data
        _this.organization_select = result.selects
        _this.loading_end('table')
      })
    },

    // 获取商务人员
    req_agent() {
      const _this = this
      apiAgentList({
        page: 1,
        size: 99,
        status: 'normal',
        group_id: '2,3,5'
      })
        .then((response) => {
          const result = response.data.datalist.data
          _this.tableFiltrateData.business_list = result
        })
        .catch(function (result) {
          _this.$message.error(result.msg)
        })
    },
    // 切换商务人员
    changeSelectBusinessuid(business_uid) {
      this.tableParams.o_id = ''
      this.reqApiOrganization(business_uid)
    },
    // 页面跳转
    handleToGoCreate() {
      this.$router.push({ path: '/product/create', query: { id: 0 } })
    },
    // 表格行状态
    tableRowClassName({ row, rowIndex }) {
      if (row['status'] == 'stop') {
        return 'discard-row'
      }
    },
    // 表格操作
    handleTableEdit(index, row) {
      this.$router.push({ path: '/product/update', query: { id: row.id } })
    },
    // 表格恢复
    handleTableRegain(index, row) {
      var _this = this
      var params = {
        id: row.id,
        status: 'normal'
      }
      _this.loading_start('table')
      apiProductUpdatePart(params).then((response) => {
        _this.loading_end('table')
        _this.loadTableData()
      })
    },
    // 表格删除
    handleTableDelete(index, row) {
      const _this = this
      _this.loading_start('table')
      apiProductDelete({
        id: row.id
      }).then((response) => {
        this.$message({
          message: response.msg,
          type: 'success'
        })
        _this.loading_end('table')
        _this.loadTableData()
      })
    },
    // 数量改变
    handleTableSizeChange(val) {
      this.tableParams.size = val
      this.loadTableData()
    },
    // 页数改变
    handleTableCurrentChange(val) {
      this.tableParams.page = val
      this.loadTableData()
      // console.log(`当前页: ${val}`);
    },
    // 部分状态改变
    tableUpdateItem(item) {
      var _this = this
      var params = {
        id: item.id,
        push_status: item.push_status,
        entry_status: item.entry_status
      }
      _this.loading_start('table')
      apiProductUpdatePart(params).then((response) => {
        _this.loading_end('table')
      })
    },
    // 加载开始...
    loading_start(keys) {
      if (Array.isArray(keys)) {
        keys.forEach((key) => {
          this.loading[key] = true
          setTimeout(() => {
            this.loading[key] = false
          }, 5000)
        })
      } else {
        this.loading[keys] = true
        setTimeout(() => {
          this.loading[keys] = false
        }, 5000)
      }
    },
    // 加载结束...
    loading_end(keys) {
      if (Array.isArray(keys)) {
        keys.forEach((key) => {
          this.$nextTick(() => {
            this.loading[key] = false
          })
        })
      } else {
        this.$nextTick(() => {
          this.loading[keys] = false
        })
      }
    },
    // 权限判断
    jsAuthJudgment(agree_group) {
      return authJudgment(agree_group)
    }
  }
}
</script>

<style lang="scss"></style>
